<template>
    <div>
    <el-container>
        <el-aside :width="isCollapse ? '64px' : '200px'">
            <div class="system">
                <span style="padding-left: 16px;font-size: 30px" v-if="isCollapse == true" class="el-icon-s-platform"></span>
                <span style="padding-left: 55px" v-if="isCollapse == false">管理系统</span>
            </div>

            <el-menu 
                class="left_menu"
                default-active="1-4-1" 
                @open="handleOpen" 
                @close="handleClose" 
                :collapse="isCollapse"
                background-color="#233645"
                text-color="#fff"
                active-text-color="#ffd04b"
                :collapse-transition="false"
                :unique-opened="true"
            >
                <template v-for="value in menuArray" :key=''>
                    <el-menu-item :index="value.id" v-if="value.Subclass.length == 0">
                        <i :class="value.icon"></i>
                        <span slot="title">{{value.title}}</span>
                    </el-menu-item>
                    <el-submenu v-if="value.Subclass.length > 0" :index="value.id">
                        <template slot="title">
                            <i :class="value.icon"></i>
                            <span slot="title">{{value.title}}</span>
                        </template>
                        <el-menu-item-group v-for="(val,index2) in value.Subclass" :key="index2">
                                <router-link :to="val.router" style="text-decoration:none">
                                    <el-menu-item @click="addTab(val)" :index="val.id">{{val.title}}</el-menu-item>
                                </router-link>
                        </el-menu-item-group>
                    </el-submenu>
                </template>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>
                <div class="zdy_header">
                    <div>
                        <span v-if="isCollapse == true" @click="isCollapse = false" class="el-icon-s-unfold btn"></span>
                        <span v-if="isCollapse == false" @click="isCollapse = true" class="el-icon-s-fold btn"></span>
                    </div>

                    <div @click="logout" class="logout">退出</div>
                </div>
            </el-header>
            <el-main>
                <el-tabs
                    class="el_tab"
                    v-model="editableTabsValue"
                    type="border-card"
                    @tab-remove="removeTab"
                    @tab-click="tab_click"
                >
                    <el-tab-pane
                        v-for="item in editableTabs"
                        :key="item.name"
                        :label="item.title"
                        :name="item.name"
                        :closable="item.closable"
                    >
                    </el-tab-pane>
                   <router-view /> 
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>
    </div>
</template>
<script>
import '@/assets/css/index.css'
export default {
    name:'homeIndex',
    data(){
        return {
            isCollapse: false,
            menuArray: [
                    {
                        id:'1',
                        icon:'el-icon-user',
                        title:'用户管理',
                        router:'',
                        Subclass:[
                            {
                                id:'1-1',
                                title:'用户列表',
                                router:'/user',
                            },
                            {
                                id:'1-2',
                                title:'角色管理',
                                router:'/role',
                            },
                            {
                                id:'1-3',
                                title:'菜单管理',
                                router:'/menu',
                            }
                        ]
                    },
                    {
                        id:'2',
                        icon:'el-icon-setting',
                        title:'设置管理',
                        router:'',
                        Subclass:[
                            {
                                id:'2-1',
                                title:'系统配置',
                                router:'/system',
                            },
                            {
                                id:'2-2',
                                title:'站内消息',
                                router:'/massage',
                            }
                        ]
                    },
                    {
                        id:'3',
                        icon:'el-icon-lock',
                        title:'权限管理',
                        router:'',
                        Subclass:[]
                    },
            ],
            screenWidth: document.body.clientWidth,  //屏幕可视区宽度
            editableTabsValue: '/indexPage',
            editableTabs: [{
                title: '首页',
                name: '/indexPage',
                closable:false
            }],
            is_pc:1
        }
    },
    mounted () {
        // 监听窗口变化
        let _this = this
        window.addEventListener('resize',function () {
            _this.screenWidth = document.body.clientWidth;
            //_this.screenHeight = document.body.clientHeight;
        })
        if (this._isMobile()) {
            this.isCollapse = true
        } else {
            this.is_pc = 2
        }
    },
    methods: {
         _isMobile() {
            let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
            return flag;
        },   
        handleOpen(key, keyPath) {
            //console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            //console.log(key, keyPath);
        },
        //增加导航块
        addTab(targetName) {
            let status = true
            let i = 0
            for(i = 0; i < this.editableTabs.length; i++){
                let y_title = this.editableTabs[i].title;
                if(y_title == targetName.title){
                    status = false
                    this.editableTabsValue = targetName.router
                    break;
                }
            }
            if(status == true) {
                this.editableTabs.push({
                    title: targetName.title,
                    name: targetName.router,
                    closable: true
                });
                this.editableTabsValue = targetName.router;
            }
        },
        //移除导航块
        removeTab(targetName) {
            let tabs = this.editableTabs;
            let activeName = this.editableTabsValue;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                        }
                    }
                });
            }
            //导航菜单移除时。跳转其它页面
            if(this.editableTabsValue != activeName){
                this.$router.push({ path: activeName });
            }
            this.editableTabsValue = activeName;
            this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            
            
        },
        //切换已经打开的菜单
        tab_click(targetName){
            this.$router.push({path:targetName.name})
        },
        logout(){
            this.$router.push({path:'/'})
        }
    },
    watch: {
        // 窗口宽度改变
        screenWidth(val){
            if(this.is_pc == 2){
                if(val < 1280){
                    this.isCollapse = true
                }else{
                    this.isCollapse = false
                }
            }
        },
        // 窗口高度改变
        screenHeight(n,o){
            console.log('高度',n,o)
        }
    },
}
</script>

<style scoped>
/deep/.el-tabs--border-card>.el-tabs__content{
    padding: 0;
}
</style>